    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" href="/static/index/css/page/base.css"/>
    <link rel="stylesheet" href="/static/index/css/page/font.css"/>
    <link rel="stylesheet" href="/static/index/jquery_weui/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/lib/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/index/css/page/personal.css" />
</head>
<style>
    .swiper-wrapper{
        height: 4rem;
    }
    /*上传input*/
    .myUpload
    {
        position: absolute;
        opacity: 0;
        z-index: 100;
        width: 30%;
        height: 13%;
        display: block;
    }
    /*关闭按钮*/
    .close
    {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        z-index: 200;
        cursor: pointer;
    }
    /*隐藏*/
    .hideimg
    {
        display: none;
    }
    /*上传的图片*/
    .addimg
    {
        width: 100%;
        height: 100%;
    }
    /*显示上传的图片*/
    .showimg
    {
        width: 100%;
        height: 100%;
    }
    #dtxz{
        width: 6rem;
        height: 4rem;
        float: left;
        margin: 4% auto;
    }
    .submit{
        float: left;
    }
    .shili{
	  position: absolute;
	  left: 4%;
	  top: 68%;
    }
    .rz_submit{
    	height:1.7rem;
    	background:none;
    	border:0;
    	font-size: 14px;
    	color: #FFFFFF;
    }
    .fileInputContainer{
        height:80px;
        background:url(/static/index/img/pic2.png) no-repeat;
        position:relative;
        left: -1rem;
        width: 80px;
    }
    #caller{
    	z-index: 50000;
    }
    .fileInputtwo{
        height:80px;
        background:url(/static/index/img/pic1.png) no-repeat;
        position:relative;

        width: 85px;
    }
    .fileInput{
        height:4rem;
        width:4rem;
        overflow: hidden;
        font-size: 300px;
        position:absolute;
        right:0;
        top:0;
        opacity: 0;
        filter:alpha(opacity=0);
        cursor:pointer;
    }
    .personal_img2{
        height:126px;
        width:100%;
    }
    .phone-title{
    	position: relative;
    	left: 1rem;
    }
    .personal-list{
    	width: 100%;
    }
    .pageControl{
    	min-height:100% ;
    	width: 100%;
    }
    .min{
    	width: 100%;
    	height: 100%;
    }
    /*图片处理css*/
    	.personal-list .swiper-slide>a{
    		overflow: hidden;
    		position: relative;
    	}
    	.personal-list .swiper-slide>a img{

    		position: absolute;
    		left: 50%;
    		top: 50%;
    	}
    	.weui-cell__ft2{
    		text-align: center;
    		padding:.3rem;
    	}

        .personal_img2{
            margin: 1rem 2rem 0 0;
            position: relative;
        }
    	.caller .weui-cell__bd{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            height: 1.5rem;
            overflow: hidden;
        }
        .caller .weui-cell__hd img{
            width: 1rem;
            height: auto;
            margin-right: .48rem;
            vertical-align: middle;
            display: inline-block;
        }
        .caller .weui-cell__hd span{
            display: inline-block;
            vertical-align: middle;
            margin-right: .48rem;
            width: 3rem;
            font-size: .75rem;
        }
        .caller-img{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .caller-img img{
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 5px;
        }
        .centerPopup .weui-popup__modal{
            width: 90%;
            height:auto;
            bottom: auto;
            top: 22%;
            background: #fff;
            border-radius: 7px;
            left: 5%;
        }
        .centerPopup .weui-popup__modal .title{
            text-align: center;
        }
        .weui-popup__overlay{
            background: #7e7e7e;
            opacity: .5;
        }
       /* .modal-content{
            padding-bottom: .5rem;
            min-height: 6rem;
        }*/
        .modal-content img{
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: .3rem;
            margin-top: .3rem;
        }

    	.centerPopup .weui-popup__modal{
            width: 90%;
            height:auto;
            bottom: auto;
            top: 22%;
            background: #fff;
            border-radius: 7px;
            left: 5%;
        }
        .centerPopup .weui-popup__modal .title{
            text-align: center;
        }
        .weui-popup__overlay{
            background: #7e7e7e;
            opacity: .5;
        }
        .modal-content{
            padding-bottom: .5rem;
            min-height: 6rem;
        }
        .modal-content img{
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: .3rem;
            margin-top: .3rem;
        }

    .weui-photo-browser-modal {
        z-index: 100;
    }
    .login-input {
        width: 80%;
        margin: 0 auto;
        padding: .5rem 1rem;
        border-radius: 1rem;
        background: #fff;
        opacity: .7;
        display: flex;
        flex-direction: row;
        font-size: .85rem;
        position: relative;
    }
</style>

<body>
<div class="pageControl personal bg-f5">
    <!--主体-->

    <div class="main">
        <div class="bg-di"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">个人信息</h1>
            <a class="msui_navTop-icon" href="/index/personal/close">
                注销
            </a>
        </div>
        <!--<p class="qiandao">{if $info.is_qiandao eq 1}今日已签到{else}点击签到{/if}</p>-->
        <div class="top">
            <a class=""></a>
            <!--背景图片-->
            {if $info.user_back}
            <div style="background:url({$info.user_back}) center center no-repeat;width:100%;height: 10rem;background-size: cover;"></div>
            {else}
            <img src="/static/index/images/idx1.png" alt=""/>
            {/if}

            <div class="index-top-tab">
                <div id="personal-bg"></div>
                <div class="personal_img viewImage">
                	{if $info.img}
                    <a><img data-img="0" class="viewPhone personal_img1" src="{$info.img}" alt=""/></a>
                    {else}
                    <a><img class="personal_img1" src="/static/index/img/head.png" alt=""/></a>
                    {/if}
                    <a id="personal-tou" href=""><img src="/static/index/img/p1.png" alt=""/></a>
                </div>
                <!--<p class="bg-ff7 renZh">-->
                    <!--{if $vo.is_rz eq 1}<img src="/static/index/img/x0.png" alt=""/>{/if}-->
                    <!--<span>{if $info.is_rz eq 0}未认证{elseif $info.is_rz eq 2}待审核{else}已认证{/if}</span>-->
                <!--</p>-->
                <div class="renZh">
                    <div class="bg-tra"></div>
                    {if $info.is_rz eq 1}<img src="/static/index/images/x0.png" alt=""/>{/if}
                    <span>{if $info.is_rz eq 0}未认证{elseif $info.is_rz eq 2}待审核{else}已认证{/if}</span>
                </div>
                <div class="index-tab">
                    <a href="1" class="active">个人资料</a>
                    <a href="2">我的照片</a>
                    <a href="3">我的发布</a>
                    <a href="4">我的关注</a>
                </div>
            </div>
        </div>
        <div class="pl personal-three_top">
            <div>
                <img class="personal-three_img" src="/static/index/images/x9.png" alt="">
            </div>
            <div class="personal-three">
                <a href="javascript:;">
                    <img src="/static/index/images/x5.png" alt="">
                    <p>魅力值<span>({$info.charm})</span></p>
                </a>
                <a href="javascript:;">
                    <img src="/static/index/images/x6.png" alt="">
                    <p>财富值<span>({$info.asset})</span></p>
                </a>
                <a href="javascript:;">
                    <img src="/static/index/images/x7.png" alt="">
                    <p>信誉值<span>({$info.Credit})</span></p>
                </a>
            </div>
        </div>

        <div class="personal-list">
            <!--切换class为active1换目录-->
            <div class="personal-list1 active1" data-value="1">
                <div class="weui-cells">

                    <a href="javascript:;" data-target="#caller" class="open-popup weui-cell weui-cell_access caller">
				        	<div class="weui-cell__hd">
            					<img src="/static/index/images/eye1.png" alt="">
            					<span class="cl-3333 fs065">最近访客</span>
        					</div>
					        <div class="weui-cell__bd caller-img">
					        	{foreach name="visit" item="vo"}
					            <img class="list"   src="{$vo.img}" alt="">
					            {/foreach}
					        </div>
					        <div class="weui-cell__ft"></div>
					</a>

                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/images/p2.png" alt=""/>
                            <span>昵称</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input type="text" id="uname" class="weui-input qianmin"  value="{$info.name}"/>
                        </div>
                        <div class="weui-cell__ft">

                        </div>
                    </div>

                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/images/p3.png" alt=""/>
                            <span>性别</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input id="sex" type="text" id="sex" readonly="true" class="weui-input qianmin" value="{if $user_id}{if $info.sex eq 0}女{else}男{/if}{/if}"/>
                        </div>
                        <div class="weui-cell__ft">

                        </div>
                    </div>
                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/images/p4.png" alt=""/>
                            <span>年龄</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input type="text" id="age" class="weui-input qianmin" value="{$info.age}"/>
                        </div>
                        <div class="weui-cell__ft">

                        </div>
                    </div>
                </div>
                <div class="weui-cells bang">
                	{if $info['tel']}
	                    <a class="weui-cell weui-cell_access">
	                        <div class="weui-cell__bd">
	                            <img src="/static/index/images/p5.png" alt=""/>
	                            <span>手机号绑定</span>
	                        </div>
	                        <div class="weui-cell__ft">
	                            <p class="cl-3333">已绑定</p>
	                        </div>
	                    </a>
                    {else}
	                    <a id="personal-phone" class="weui-cell weui-cell_access">
	                        <div class="weui-cell__bd">
	                            <img src="/static/index/images/p5.png" alt=""/>
	                            <span>手机号绑定</span>
	                        </div>
	                        <div class="weui-cell__ft">
	                            <p class="cl-3333">未绑定</p>
	                        </div>
	                    </a>
                    {/if}
                    {if $info['email'] eq ''}
                    <a id="personal-email" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <img src="/static/index/images/p6.png" alt=""/>
                            <span>邮箱绑定</span>
                        </div>
                        <div class="weui-cell__ft">
                            <p class="cl-3333">未绑定</p>
                        </div>
                    </a>
                    {else}
                    <a class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <img src="/static/index/images/p6.png" alt=""/>
                            <span>邮箱绑定</span>
                        </div>
                        <div class="weui-cell__ft">
                            <p class="cl-3333">已绑定</p>
                        </div>
                    </a>
                    {/if}
                    {if $info['is_rz'] eq 0}
	                    <a class="weui-cell weui-cell_access" id="shiren">
	                        <div class="weui-cell__bd">
	                            <img src="/static/index/images/p7.png" alt=""/>
	                            <span>用户实名认证</span>
	                        </div>
	                        <div class="weui-cell__ft">
	                            <p class="cl-3333">未实名</p>
	                        </div>
	                    </a>
                    {elseif $info['is_rz'] eq 1}
	                    <a class="weui-cell weui-cell_access">
	                        <div class="weui-cell__bd">
	                            <img src="/static/index/images/p7.png" alt=""/>
	                            <span>用户实名认证</span>
	                        </div>
	                        <div class="weui-cell__ft">
	                            <p class="cl-3333">已实名</p>
	                        </div>
	                    </a>
                    {else}
	                    <a class="weui-cell weui-cell_access">
	                        <div class="weui-cell__bd">
	                            <img src="/static/index/images/p7.png" alt=""/>
	                            <span>用户实名认证</span>
	                        </div>
	                        <div class="weui-cell__ft">
	                            <p class="cl-3333">待审核</p>
	                        </div>
	                    </a>
                    {/if}
                    <div class="weui-cell weui-cell_access">
                        <div class="weui-label">
                            <img src="/static/index/images/p2.png" alt=""/>
                            <span>签名</span>
                        </div>
                        <div class="weui-cell__bd">
                            <input type="text" id="qianmin" class="weui-input qianmin" value="{$info.sign}"/>
                            <input type="hidden" id="uid" class="weui-input" value="{$info.id}"/>
                        </div>
                        <div class="weui-cell__ft">

                        </div>
                    </div>
                </div>
                <div class="weui-cells" style="background-color: #F5F5F5;">
                    <a href="/index/personal/wallet?id={$info.id}" class="weui-cell weui-cell_access" style="background-color: #fff;" id="">
                        <div class="weui-cell__bd qianbao">
                            <img src="/static/index/images/qb.png" alt=""/>
                            <span>钱包</span>
                        </div>
                        <div class="weui-cell__ft">
                            <p class="cl-3333"></p>
                        </div>
                    </a>
                    <a href="/index/personal/gift_notes" class="weui-cell weui-cell_access"  style="background-color: #fff; margin-bottom: 2rem">
                        <div class="weui-cell__bd qianbao">
                            <img src="/static/index/images/x10.png" alt=""/>
                            <span>礼物</span>
                        </div>
                        <div class="weui-cell__ft">
                            <p class="cl-3333"></p>
                        </div>
                    </a>




                    <a href="/index/wpay/get_qr_code" class="weui-cell weui-cell_access"  style="background-color: #fff; margin-bottom: 2rem">
                        <div class="weui-cell__bd qianbao">
                            <img src="/static/index/images/x10.png" alt=""/>
                            <span>微信绑定</span>
                        </div>
                        <div class="weui-cell__ft">
                            <p class="cl-3333"></p>
                        </div>
                    </a>




                </div>
            </div>
            <div class="personal-list2" data-value="2">
                <!--有内容给class为full加active2，没有内容给null 加class active2-->
                <div class="full active2 pic1">
                	<!--我的照片-->
                    {foreach name="my_photo_info" item="vo" key="k"}
                    <div class="pic-list t0">
                        <p class="text-center">{$vo.create_time}</p>
                        <div class="swiper-container">
                            <div class="swiper-wrapper pic1">
                                {foreach name="vo['photo']" item="vv"}
                                <div class="swiper-slide">
                                    <a href="javascript:;" class="item"><img src="{$vv}" alt=""/></a>
                                </div>
                                {/foreach}
                            </div>
                            <div class="pic-count"><?php echo count($vo["photo"]);?>张</div>
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="null">
                    <p class="cl-3333 text-center null1">您还没有发布照片</p>
                </div>
            </div>
            <div class="personal-list3" data-value="3">
                <div class="full active3">
                	<!--我的发布-->
                    <!--class为t0，每加一组数据递增-->
                    {foreach name="fabu_info" item="vo"}
                    <div class="list2 t0">
                        <p class="list2-a">{$vo.content}</p>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                            	<?php $ssh = explode("|",$vo['photo']);?>
                            	{foreach name="ssh" item="photo"}
                                <div class="swiper-slide">
                                    <a href="/index/index/detail?id={$vo.id}&uid={$user_id}"><img src="{$photo}" alt=""/></a>
                                </div>
                                {/foreach}
                            </div>
                            <div class="pic-count"><?php echo count($ssh);?>张</div>
                        </div>
                        <div class="weui-cell1">
                            <div class="weui-cell__bd"></div>
                            <div class="weui-cell__ft">
                                <img src="/static/index/img/x2.png" alt=""/>
                                <span>{$vo.count}</span>
                            </div>
                            <div class="weui-cell__ft">
                                <img src="/static/index/img/x3.png" alt=""/>
                                <span>{$vo.comment_count}</span>

                            </div>
                            <div class="weui-cell__ft">
                                <a href="/index/personal/release?user_id={$user_id}&id={$vo.id}"><img src="/static/index/img/g3.png" alt=""/></a>
                            </div>
                        </div>
                        <div class="weui-cell1">
                            <div class="weui-cell__bd">
                            	<div class="weui-cell__ft2">
                            		{if $vo.is_end eq 0}
	                            		{if $vo.is_start eq 0}
		                            		{if $vo.cancel_status eq 0 || $vo.cancel_status eq 2}
			                            		<a class="radio-btn bg-ff7 cl-f fs07 active_cancel">取消活动</a><input type="hidden" value="{$vo.id}" class="active_id" />
			                        			<a class="radio-btn bg-ff7 cl-f fs07 active_start">开始活动</a><input type="hidden" value="{$vo.id}" class="active_id" />
		                                		<a href="/index/personal/message?id={$vo.id}" class="radio-btn bg-ff7 cl-f fs07">已确认用户列表</a>
		                            		{elseif $vo.cancel_status eq -1}
			                            		<a class="radio-btn bg-ff7 cl-f fs07" style="background: #ccc;">取消活动申请审核中...</a>
			                            		<a class="radio-btn bg-ff7 cl-f fs07" style="background: #ccc;">活动已取消</a>
		                            		{/if}
	                            		{else}
	                            			<a class="radio-btn bg-ff7 cl-f fs07" style="background: #ccc;">活动进行中...</a>
	                                		<a href="/index/personal/message?id={$vo.id}" class="radio-btn bg-ff7 cl-f fs07">已确认用户列表</a>
	                            		{/if}
                            		{else}
	                            		<a class="radio-btn bg-ff7 cl-f fs07" style="background: #ccc;">活动已结束</a>
                            		{/if}
                            	</div>
                            </div>
                    	</div>


                    </div>
                    {/foreach}
            </div>
            <div class="null active2">
                <p class="cl-3333 text-center null1">您还没有发布活动</p>
            </div>
            </div>
            <div class="personal-list4" data-value="4">
                <!--有内容给class为full加active2，没有内容给null 加class active2-->
                <div class="full">
                    <!--class为t0，每加一组数据递增-->
                    {foreach name="gz_data" item="vo"}
                    <div class="list2 t0">
                        <p class="list2-a">{$vo.content}</p>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                            	<?php $ssh = explode("|",$vo['photo']);?>
                            	{foreach name="ssh" item="v1"}
	                                <div class="swiper-slide">
	                                    <a href="/index/index/detail?id={$vo.id}&uid={$vo.user_id}"><img src="{$v1}" alt=""/></a>
	                                </div>
                               	{/foreach}
                            </div>
                            <div class="pic-count"><?php echo count($ssh);?>张</div>
                        </div>
                        <div class="weui-cell1">
                            <div class="weui-cell__bd"></div>
                            <div class="weui-cell__ft">
                                <img src="/static/index/img/x2.png" alt=""/>
                                <span>{$vo.count}</span>
                            </div>
                            <div class="weui-cell__ft">
                                <img src="/static/index/img/x3.png" alt=""/>
                                <span>{$vo.comment_count}</span>
                            </div>
                            <div class="weui-cell__ft">
                               <a href="/index/personal/concern?uid={$user_id}&info_id={$vo.id}"><img src="/static/index/img/g2.png" alt=""/></a>
                            </div>
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="null active2">
                    <p class="cl-3333 text-center null1">您还没有任何关注</p>
                </div>
                <!--<div class="null active2">
                    <p class="cl-3333 text-center null1">您还没有任何关注</p>
                    <p class="null2 text-center"><img src="/static/index/img/f1.png" alt=""/></p>
                    <div class="pic-btn">
                        <p><a class="bg-b3 cl-f" href="/index/index/search_near">查看附近</a></p>
                        <p> <a class="bg-ff7 cl-f" href="/index/index/index">前往热门</a></p>
                    </div>
                </div>-->

        </div>
    </div>
    <!--实名认证弹窗,加class为active3显示弹出-->
    <div class="shiren">
        <p>听说</p>
        <p>通过了实名认证的用户</p>
        <p>会有更多人愿意加您哟~</p>
        <div class="pic-btn">
            <p><a class="bg-b3 cl-f shiren-qu" href="">取消</a></p>
            <p> <a class="bg-ff7 cl-f shiren-go" href="">前去实名认证</a></p>
        </div>
    </div>
    <!--实名认证窗口-->
    <div id="renzheng" class="">
        <div class="weui-cell weui-cell_access">
            <div class="weui-label">
                <img src="/static/index/img/r1.png" alt=""/>
            </div>
            <div class="weui-cell__bd">
                <span>真实姓名:</span>
                <input type="text" id="name" class="weui-input"/>
            </div>
            <div class="weui-cell__ft">

            </div>
        </div>
        <div class="weui-cell weui-cell_access">
            <div class="weui-label">
                <img src="/static/index/img/r2.png" alt=""/>

            </div>
            <div class="weui-cell__bd">
                <span>身份证号码:</span>
                <input type="text" id="IDcard" class="weui-input w40"/>
            </div>
            <div class="weui-cell__ft">

            </div>
        </div>
        <div class="weui-cell weui-cell_access hang-last">
            <div class="weui-label">
                <img src="/static/index/img/r3.png" alt=""/>
            </div>
            <div class="weui-cell__bd">
                <span class="renz-pic-txt">身份证反面:</span>
            </div>
            <div class="weui-cell__ft">

            </div>
        </div>
        <div class="renz-pic">
            <a class="sctp">
            	<div>示例：</div>
                <img src="/static/index/img/shili.jpg" class="addimg"/>
            </a>
            <a class="sctp">
                <input type="hidden" id="number" class="hiddens" name="number" value="">
                <input type="file" name="pic2" id="file" class="myUpload" />
                <input type="hidden" id="photo" value=""/>
                <img src="/static/index/img/card.png" class="addimg"/>
                <img class="showimg hideimg"/>
            </a>

        </div>
        <div>
            <p class="renz-txt1">注: 以上信息必须确认为真实有效  &nbsp;实名认证具有法律效应</p>
            <p class="renz-txt2">本公司将尊重个人隐私  &nbsp;并保留最终解释权</p>
        </div>
        <div class="pic-btn">
            <p><a id="renzheng-qu" class=" bg-b3 cl-f" href="">取消</a></p>
            <p><a class="bg-ff7 cl-f" id="user_rz" href="javascript:;">上传</a></p>
        </div>
    </div>
    <!--编辑邮箱窗口-->
    <div class="personal-email tan">
        <div class="bg-tan"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back goBack" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">绑定邮箱</h1>
        </div>
        <div class="email-input">
            <div class="personal-input">
                <div class="email-label">
                    <label class="fs08">输入邮箱号：</label>
                </div>
                <div class="weui-cell__bd">
                    <input type="text" class="weui-input" id="email_num"/>
                </div>
            </div>
            <a id="binding_email" class="personal-btn mt30 cl-f">发送验证到您的邮箱</a>
        </div>
    </div>
    <!--编辑手机号码窗口-->
    <div class="personal-phone tan">
        <div class="bg-tan"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back goBack" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">绑定手机</h1>
        </div>
        <div class="email-input">
            <div class="personal-input">
                <div class="email-label">
                    <label class="fs08">输入手机号：</label>
                </div>
                <div class="weui-cell__bd">
                    <input type="text" class="weui-input" id="tel"/>
                </div>
            </div>
            <div class="personal-input">
                <div class="email-label">
                    <label class="fs08">随机验证码：</label>
                </div>
                <div class="weui-cell__bd">
                    <input type="text" class="weui-input" id="code" />
                </div>
                <img id="captcha" src="{:captcha_src()}" alt="验证码" title="点击刷新验证码" style="cursor:pointer;width: 4rem;height: 1.3rem; position: absolute; right: 0;">
            </div>
            <div class="personal-input">
                <div class="email-label">
                    <label class="fs08">输入验证码：</label>
                </div>
                <div class="weui-cell__bd">
                    <input type="text" class="weui-input" id="sms_code" />
                </div>
                <div class="weui-cell__ft">
                    <button class="personal-btn1 fs07 cl-f js-verify">发送验证码</button>
                </div>
            </div>
            <div class="pic-btn">
                <p><a class="bg-b3 cl-f tan-qu" href="">取消</a></p>
                <p> <a class="bg-ff7 cl-f" id="binding">确定</a></p>
            </div>
        </div>
    </div>
    <!--编辑头像窗口-->
    <div class="personal-tou tan">
        <div class="bg-tan"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back goBack" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">编辑头像</h1>
        </div>
        <div class="null">
            <div class="personal_img">
            	{if $info.img}
                <a><img class="personal_img2" id="newimg" src="{$info.img}" alt=""/></a>
                {else}
                <a><img class="personal_img2" id="newimg" src="/static/index/img/head.png" alt=""/></a>
                {/if}
            </div>
            <p class="cl-3333 text-center null1">编辑头像</p>
            <div class="pic-lf">
                <a>
                    <div class="fileInputContainer">
                          <input class="fileInput" type="file" class="myUpload" name="photos[]" accept="image/*" multiple id="subinfo" capture="camera"/>
                    </div>
                </a>
               <p>拍照</p>
            </div>
              <div class="pic-rt">
                <a>
                   <div class="fileInputtwo">
                        <input class="fileInput" type="file" id="tpinfo"/>
                    </div>
                </a>
                <p class="phone-title">相册</p>
               </div>
            <div class="pic-btn">
                <input type="hidden" id="imgsrc" value=""/>
                <p><a class="bg-b3 cl-f tan-qu">取消</a></p>
                <p> <a class="bg-ff7 cl-f" id="photoimg">上传</a></p>
            </div>
        </div>
    </div>
    <!--编辑背景图片窗口-->
    <div class="personal-bg tan">
        <div class="bg-tan"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back goBack" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">编辑背景</h1>
        </div>
        <div class="null">
            <div class="personal_img">
                {if $info.user_back}
                <a><img class="personal_img2" id="newimgs" src="{$info.user_back}" alt=""/></a>
                {else}
                <a><img class="personal_img2" id="newimgs" src="/static/index/img/idx.png" alt=""/></a>
                {/if}
            </div>
            <p class="cl-3333 text-center null1">编辑背景</p>
            <div class="back-pic-rt">
                <a>
                    <div class="fileInputtwo">
                        <input class="fileInput" type="file" id="tpinfos"/>
                    </div>
                </a>

                <p>相册</p>
            </div>
            <div class="pic-btn">
                <p><a class="bg-b3 cl-f tan-qu" href="">取消</a></p>
                <p> <a class="bg-ff7 cl-f" id="backip">上传</a></p>
            </div>
        </div>
    </div>
</div>
<!--最近访客-->
<div id="caller" class="centerPopup weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <h1 class="title">最近访客</h1>
            </div>
        </div>
        <div class="modal-content">
        	{foreach name='visit' item='vo'}
            <a href="/index/personal/personal_detail?id={$vo.user_id}"><img class="list" src="{$vo.img}" alt=""></a>
            {/foreach}
        </div>
    </div>
</div>
<!-- jquery-2.1.4 -->
<script type="text/javascript" src="/static/index/jquery_weui/lib/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="/static/index/jquery_weui/js/jquery-weui.min.js"></script>
<script src="/static/index/jquery_weui/js/swiper.min.js"></script>
    <script>
        $(function () {
            var bg_imgWidth=$('.bg_img').css('width');
            var bg_imgHeidth=$('.bg_img').css('height');
        })
        var windowWidth=document.body.offsetWidth;
        windowTopWidth=.65425*windowWidth;
        var navHeight=$('.msui_nav.msui_navTop').height();
        var countHeight=windowTopWidth+navHeight+12;
        console.log(countHeight);

        $('.personal-list').css({
            position:'absolute',
            top:countHeight,
            left:'0',
            right:'0',
            width:'100%'
        });
        $('.personal-list>div').css({
            position:'fixed',
            top:'0',
            left:'100%',
            right:'-100%'
        });
        $('.personal-list>div.active1').css({
            position:'absolute',
            top:'0',
            left:'0',
            right:'0'
        })
        $(function () {
            $('.viewImage').on('click','img.viewPhone',function (e) {
                e.preventDefault();
                var imgmain=[];
                var tt=$(this).parents('.viewImage').find('img.viewPhone');
                var countActive=$(this).attr('data-img');
                countActive=parseFloat(countActive);
                var count=tt.length;
                for (var i=0;i<count;i++){
                    imgmain.push(tt[i].alt);
                }
                console.log(imgmain);
                var pb1 = $.photoBrowser({
                    items:imgmain,
                    onSlideChange: function(index) {
                        console.log(index);
                        console.log()
                    },
                    onOpen: function() {

                    },
                    onClose: function() {

                    },
                    initIndex:countActive
                });
                pb1.open();

                $(`.weui-photo-browser-modal.weui-photo-browser-modal-visible .swiper-wrapper .swiper-slide:nth-of-type(${countActive+1})`).addClass('swiper-slide-active')
            });
            var windowWidth=document.body.offsetWidth;
            windowTopWidth=.65425*windowWidth;
            var navHeight=$('.msui_nav.msui_navTop').height();
            var countHeight=windowTopWidth+navHeight+12;
            console.log(countHeight);

            $('.personal-list').css({
                position:'absolute',
                top:countHeight,
                left:'0',
                right:'0',
                width:'100%'
            });
            $('.personal-list>div').css({
                position:'fixed',
                top:'0',
                left:'100%',
                right:'-100%'
            });
            $('.personal-list>div.active1').css({
                position:'absolute',
                top:'0',
                left:'0',
                right:'0'
            })
        })
    </script>
<script>
    /*签到*/
    $('.qiandao').on('click',function(){
        $.post(
            "/index/personal/qiandao",
            function(data){
                alert(data.msg);
                $('.qiandao').html('今日已签到');
            },'json'
        )
    })
	/*开始活动*/
	$('.active_cancel').click(function(){
        var active_id = $(this).next('.active_id').val();
        //alert(active_id);return;
        var self = $(this);
		var res=prompt("请输入取消活动的原因","");
		if(res != null && res != ""){
			$.post(
				"/index/personal/cancel",
				{active_id: active_id,reason: res},
				function(data){
					if(data == 1){
                        self.html('取消活动申请审核中...');
                        self.parent().find('a:eq(0)').css('background','#ccc');
                        self.parent().find('a:eq(1)').css('display','none');
						alert('取消活动申请成功，请等待审核结果！');

					}else{
						alert('取消活动申请失败，请稍后再试！')
					}
				}
			)
		}else{
			if(res != null){
				alert('请填写取消活动原因！');
			}
		}
	})
    $('.active_start').click(function(){
        var active_id = $(this).next('.active_id').val();
        //alert(active_id);return;
        var self = $(this);
        $.post(
            "/index/personal/start",
            {active_id: active_id},
            function(data){
                if(data == 1){
					self.parent().parent().find('.weui-cell__ft2>a:nth-of-type(1)').css('display','none');
					self.parent().parent().find('.weui-cell__ft2>a:nth-of-type(2)').html('活动进行中...');
					self.parent().parent().find('.weui-cell__ft2>a:nth-of-type(2)').css('background','#ccc');
                    alert('操作成功！');
                }else if(data == -1){
                    alert('操作失败！');
                }else{
                	alert('未到活动开始时间，操作失败!');
                }
            }
        )
    });
	/*用户实名认证*/
	$("#user_rz").click(function(){
		var uid = {$user_id};
		var name = $("#name").val();
		var IDcard = $("#IDcard").val();
		var pic2 = $("#photo").val();

		$.post(
			"/index/personal/realname",
			{uid:uid,name:name,IDcard:IDcard,pic2:pic2},
		    function(data){
//		    	alert(data);return;
				if(data == '-1'){
					alert("姓名格式错误，请重新填写！");
				}else if(data == '-2'){
					alert("身份证号码错误，请重新填写！");
				}else if(data == '-3'){
					alert("请上传身份证照片!");
				}else if(data == '-4'){
					alert('请求认证失败，请查看数据是否填写完整！');
				}else{
					alert('请求提交 ,审核时间大概两个工作日完成！');
					location.href='/index/personal/personal?id='+uid
				}
		    }
		);
	});

    $("#subinfo").change(function (){
        var filess = this.files[0];
        var src=getObjectURL(filess);//获取上传文件的路径
        $("#newimg").attr("src",src);
        var formData = new FormData();
        formData.append("fb_img",this.files[0]);
        var url = "/index/Personal/mcupload";
        $.ajax({
            url:url,
            data:formData,
            processData: false,
            contentType: false,
            type:"post",
            success:function(data){
                 $("#imgsrc").val(data);
            },
            error:function(e){

            }
        });
    });
    $("#subinfos").change(function (){
        var filess = this.files[0];
        var src=getObjectURL(filess);//获取上传文件的路径
        $("#newimgs").attr("src",src);
        var formData = new FormData();
        formData.append("fb_img",this.files[0]);
        var url = "/index/Personal/mcupload";
        $.ajax({
            url:url,
            data:formData,
            processData: false,
            contentType: false,
            type:"post",
            success:function(data){
                $("#imgsrc").val(data);
            },
            error:function(e){

            }
        });
    });
    //编辑背景图
    $("#tpinfos").change(function(){
        var filess = this.files[0];
        var src=getObjectURL(filess);//获取上传文件的路径
        $("#newimgs").attr("src",src);
        var formData = new FormData();
        formData.append("fb_img",this.files[0]);
        var url = "/index/Personal/mcupload";
        $.ajax({
            url:url,
            data:formData,
            processData: false,
            contentType: false,
            type:"post",
            success:function(data){
                $("#imgsrc").val(data);
            },
            error:function(e){

            }
        });
    });
    //编辑头像
    $("#tpinfo").change(function(){
        var filess = this.files[0];
        var src=getObjectURL(filess);//获取上传文件的路径
        $("#newimg").attr("src",src);
        var formData = new FormData();
        formData.append("fb_img",this.files[0]);
        var url = "/index/Personal/mcupload";
        $.ajax({
            url:url,
            data:formData,
            processData: false,
            contentType: false,
            type:"post",
            success:function(data){
                $("#imgsrc").val(data);
            },
            error:function(e){

            }
        });
    });
    //图片上传
    $("#photoimg").click(function(){
        var img = $("#imgsrc").val();
        var id = {$user_id};
        $.ajax({
            url:'/index/personal/uphead',
            type:'post',
            data:{img:img,id:id},
            success:function(data){
                if(data == "1") {
                    alert("头像修改成功");
                    window.location.href="/index/personal/personal?id="+{$user_id};
                }else if(data == "-1"){
                    alert("修改失败");
                }
            },
            error:function(){
alert("修改失败");
            }
        });
    });
    $("#backip").click(function(){
        var img = $("#imgsrc").val();
        $.ajax({
            url:'/index/personal/upback',
            type:'post',
            data:{img:img},
            success:function(data){
                if(data == "1") {
                    alert("背景修改成功");
                    window.location.href="/index/personal/personal?id="+{$user_id};
                }else if(data == "-1"){
                    alert("修改失败");
                }
            },
            error:function(){
                alert("修改失败");
            }
        });
    });

	/*绑定手机号码（发送验证码插件）*/
	function verifyCode(target,time,mtarget,message) {
        if (time == 0) {
            target.removeAttr('disabled');
            target.html('获取验证码');
            if (mtarget) {
                mtarget.closest('p').css('display', 'none');
                mtarget.html(message);
            }
        }
        else {
            target.attr('disabled', 'disabled');
            target.html(time + 's后可以重新获取');
            if (mtarget) {
                mtarget.closest('p').css('display', 'block');
                mtarget.html(message);
            }
            time--;
            setTimeout(function () {
                verifyCode(target, time);
            }, 1000)
        }
    }
    $('.js-verify').on('click',function(e){
    	/*验证手机号码*/
		var re;
	    var tel=$("#tel").val();
        var code=$("#code").val();
        var type = 2;//type = 2 为绑定手机号
	    re= /^0?(13|14|15|17|18)[0-9]{9}$/
	    if(re.test(tel))
	    {
	    	$.post(
                "/index/sms/phone",
                {tel: tel,code: code,type: type},
			    function(data){
			    	if(data == -1){
			    		alert("该手机号码已被绑定！");
			    	}else if(data == -2){
                        alert('随机验证码错误！');
                        $('#code').val('');
                    }
		   		}
			);
	    	e.preventDefault();
       		verifyCode($(this),60);
	    }else{
	    	alert('请输入正确的手机号码！');
	    }
    });
    /*刷新随机验证码*/
    $("#captcha").click(function () {
        $(this).attr("src","{:captcha_src()}?t="+new Date().getTime())
    });

    /*确认绑定*/
	$("#binding").click(function(){
		tel = $("#tel").val();
        sms_code = $("#sms_code").val();
		user_id = {$user_id};
		$.post(
			"/index/personal/binding",
			{ tel:tel,sms_code:sms_code,user_id:user_id},
		    function(data){
		    	if(data == 1){
		    		alert('绑定成功');window.location.href="/index/personal/personal?id="+user_id
		    	}
		    	if(data == -1){
		    		alert('该手机号码已被绑定！');
		    	}
		    	if(data == -3){
		    		alert('验证码错误！');
		    	}

		    }
		)
	});
	/*绑定邮箱*/
	$("#binding_email").click(function(){
		var re;
		email = $("#email_num").val();
		user_id = {$user_id};
		name = "{$info['name']}";
		re= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
	    if(re.test(email))
		{
			$.post(
				"/index/email/send_email",
				{email:email,user_id:user_id,name:name},
			    function(data){
			    	if(data == -1){
			    		alert('该邮箱已经被绑定！');
			    	}else{
			    		alert('邮件发送成功，请前往邮箱查看！');
			    		window.location.href="/index/personal/personal?id="+user_id;
			    	}
			    }
			)
		}else{
	    	alert('您的电子邮件格式不正确！');
		}
	});

    $(".qianmin").change(function(){
        qian = $("#qianmin").val();
        age = $("#age").val();
        uname = $("#uname").val()
        sex = $("#sex").val();
        if(sex == '男'){
            sex = 1;
        }else if(sex == '女'){
            sex = 0;
        }else{
        	sex = '-1';
        }
        uid = {$user_id};
        $.ajax({
            url:"/index/personal/updatesign",
            data:{id:uid,sign:qian,age:age,uname:uname,sex:sex},
            type:"post",
            success:function(data){
            }
        });
    });
    $(".goBack").click(function (e) {
        e.preventDefault();
        $(this).parent().parent().hide(400)
    })
    /*$("#sex").select({
        title: "选择性别",
        items: ["未选择","男", "女"]
    });*/
    $("#personal-bg").click(function (e) {
        e.preventDefault();
        $(".personal-bg").show();
    })
    $("#personal-tou").click(function (e) {
        e.preventDefault();
        $(".personal-tou").show();
        var listImg=$('.personal-tou .personal_img2').css('width');
        $('.personal_img img').css('height',listImg);
        console.log(listImg)
    })
    $("#personal-email").click(function (e) {
        e.preventDefault();
        $(".personal-email").show();
    })
    $("#personal-phone").click(function (e) {
        e.preventDefault();
        $(".personal-phone").show();
    })
    $(".tan-qu").click(function (e) {
        e.preventDefault();
        $(this).parent().parent().parent().parent().hide(400)
    })
    $(".shiren-go").click(function (e) {
        e.preventDefault();
        $(".shiren").hide(400);
        $("#renzheng").show();
        $(".personal-list>div").css('display','none')
        $(".shiren").removeClass("active3")
        $(".index-tab>a").css('display','none')
    })
    $("#renzheng-qu").click(function (e) {
        e.preventDefault();
        $("#renzheng").hide(400);
        $(".personal-list>div:first-child").addClass("active1")
        $(".index-tab>a:first-child").addClass("active")
    })
    $("#shiren").click(function (e) {
        e.preventDefault();
        $(".shiren").show();
    })
    $(".shiren-qu").click(function (e) {
        e.preventDefault();
        $(".shiren").hide(400);
    })
    $(function(){
        var perWidth = $(".personal_img1").css("width");
        $(".personal_img1").css("height",perWidth);
        personal();
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 5
        });

    });

   var activeHeight=$('.activ1').height();
   console.log(activeHeight)
    $(".index-tab").on('click','a',function(e){
        e.preventDefault();
        $("#renzheng").hide(400);
        var count=$(this).attr('href');
        $(this).addClass('active')
                .siblings().removeClass('active');
        $(`[data-value='${count}']`).addClass("active1")
                .siblings().removeClass('active1');
                var activeHeight1=$('.activ1').height();
        $(`[data-value='${count}']`).css({
    	position:'absolute'
    }).animate({
            top:'0',
            left:'0',
            right:'0'
        }).siblings().css({
    	position:'fixed',
            top:'0',
            left:'100%',
            right:'-100%'

    })

    })
    /*for(var j=1;j<5;j++){
        var listLength=$(`[data-value='${j}']>div`).length;

        for(var t=0;t<listLength;t++){
            var slider_length=$(`[data-value='${j}'] .t${t} .swiper-wrapper`).children().length;
            $(`[data-value='${j}'] .t${t} .pic-count`).html(slider_length+"张")
        }
    }*/
    function personal(){
        for(var i=2;i<5;i++){
            var personalList=$(`.personal-list${i} .full`).children().length;
            if(personalList!==0){
                console.log(2);
                $(`.personal-list${i} .full`).addClass('active2')
                $(`.personal-list${i} .null`).removeClass('active2')
            }else{
                $(`.personal-list${i} .full`).removeClass('active2')
                $(`.personal-list${i} .null`).addClass('active2')
            }
        }
    }

    //上传图片
    $(function(){
        //点击上传时实时显示图片
        $(".sctp").on("change",".myUpload",function(){
            var src=getObjectURL(this.files[0]);//获取上传文件的路径
            $(this).siblings(".close").removeClass('hideimg');
            $(this).siblings(".addimg").addClass('hideimg');
            $(this).siblings(".showimg").removeClass('hideimg');
            $(this).siblings(".showimg").attr('src',src);//把路径赋值给img标签
            $(this).siblings(".addimg").remove();
        });

        //点击关闭按钮时恢复初始状态
        $(".close").on("click",function(){
            var file=$(this).parent().find(".myUpload");
            file.after(file.clone().val(""));
            file.remove();
            $(this).addClass('hideimg');
            $(this).siblings(".addimg").removeClass('hideimg');
            $(this).siblings(".showimg").addClass('hideimg');
            $(this).siblings(".showimg").removeAttr('src');//把img标签路径移除
        });
    });

    //获取上传文件的url
    function getObjectURL(file)
    {
        var url = null;
        if (window.createObjectURL != undefined)
        {
            url = window.createObjectURL(file);
        }
        else if (window.URL != undefined)
        {
            url = window.URL.createObjectURL(file);
        }
        else if (window.webkitURL != undefined)
        {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    $("#file").change(function(){
    	var filess = this.files[0];
        var formData = new FormData();
        formData.append("fb_img",this.files[0]);
        var url = "/index/Release/mcupload";
	$.ajax({
            url:url,
            data:formData,
            processData: false,
            contentType: false,
            type:"post",
            success:function(data){
                var photo = $("#photo").val();

                if(photo ==""){
                    photo = data;
                    $("#photo").val(photo);
                }else{
                    photo   = photo+"|"+data;
                    $("#photo").val("");
                    $("#photo").val(photo);
                }
//alert(data);
            },
            error:function(e){

            }
        });

    });
$(function(){
    $('.personal-list .swiper-slide').css({
        width:'30%',
        marginRight:'3%'
    })
		$('.personal-list .swiper-slide').each(function(){
			var swiperWidth=$(this).css('width');
			console.log(swiperWidth)
			$(this).css('height',swiperWidth)
		})



		//		图片处理
		$('.personal-list .swiper-slide>a img').each(function(){

			var imgWidth=-parseFloat($(this).css('width'))/2;
			var imgHeight=-parseFloat($(this).css('height'))/2;
			/*console.log(imgWidth)
			console.log(imgHeight)*/

			var imgWidth1=parseFloat($(this).css('width'));
			var imgHeight1=parseFloat($(this).css('height'));
			if(imgWidth1>=imgHeight1){
				$(this).css({
					height:'100%',
					width:'auto'
				})
			$(this).css('top','0')
			$(this).css('margin-left',imgWidth)
			}else if(imgWidth1<imgHeight1){
				$(this).css({
					height:'auto',
					width:'100%'
				})
				$(this).css('margin-top',imgHeight)
				$(this).css('margin-left',imgWidth)
			}
		})
	})




	window.POP = {}

    ;(function(P){
        P.eventMap = {
            listen : {},
            on : function(type, fn){
                if(typeof type === 'string'){
                    if(!this.listen.hasOwnProperty(type)){
                        this.listen[type] = [];
                    }
                    if(typeof fn === 'function'){
                        return this.listen[type].push(fn);
                    }
                }
            },
            fire : function(type){
                if(typeof type === 'string'){
                    var _listenType = this.listen[type];
                    if(_listenType instanceof Array){
                        for (var i = 0; i < _listenType.length; i++) {
                            _listenType[i].apply(this,[].slice.call(arguments,1));
                        }
                    }
                }
            },
            remove : function(type){
                if(type instanceof Array){
                    var _type;
                    for (var i = 0; i < type.length; i++) {
                        if(type[i] && this.listen.hasOwnProperty(type[i])){
                            delete this.listen[type[i]];
                        }
                    }
                }else{
                    if(type && this.listen.hasOwnProperty(type)){
                        delete this.listen[type];
                    }
                }
            }
        }
    })(POP);

    ;(function(P, win, doc){
        var _layer = 2000;

        P.pic = function(obj,option){
            return new _t(obj,option);
        }

        var _t = function(){
            this.init.apply(this, arguments)
        }

        _t.prototype = {
            init : function(obj, option){
                this.$el = typeof obj === 'string' ? doc.querySelector(obj) : obj;
                var _imgSrc = '';
                var opt = {
                    dataSrc : 'data-src',
                    _imgSrc : _imgSrc,
                    item : 'li'
                }
                if(option && option instanceof Object){
                    for(var k in option){
                        opt[k] = option[k];
                    }
                }
                console.log(opt)
                this.opt = opt;
                this._index = this.opt.index;

                //创建弹出内容
                var _item = this.$el.querySelectorAll(this.opt.item);
                var _self = this;
                [].forEach.call(_item,function(item,i){
                    item.addEventListener('click',function(e){
                        e.preventDefault();
                        this._index = i;
                        this.createContent();
                        this.initPage(i);
                        this.init = null;
                    }.bind(_self),false);
                });

            },
            bindUI : function(){
                var _list = this._list;
                var _item = _list.querySelectorAll('span');
                var _self = this;
                this.isRun = false;

                _list.addEventListener('touchstart',this,false);
                _list.addEventListener('touchmove',this,false);
                _list.addEventListener('touchend',this,false);
                window.addEventListener('resize',this,false);

                this._wrap.addEventListener('click',function(e){
                    e.preventDefault();
                    POP.eventMap.fire('wrapClick');
                },true);
            },
            destroy : function(){

                var _list = this._list;
                this._wrap.classList.remove('isShow');
                this._wrap.addEventListener("webkitTransitionEnd",remove,false);
                this._wrap.addEventListener("transitionend",remove,false);

                function remove(){
                    this.parentNode && this.parentNode.removeChild(this);
                }

                POP.eventMap.remove('wrapClick');
                _list.removeEventListener('touchstart',this,false);
                _list.removeEventListener('touchmove',this,false);
                _list.removeEventListener('touchend',this,false);
            },
            handleEvent : function(e){
                var _type = e.type;
                switch (_type) {
                    case 'touchstart':
                        this.touchstart(e)
                        break;
                    case 'touchmove':
                        this.touchmove(e)
                        break;
                    case 'touchend':
                        this.touchend(e)
                        break;
                    case 'resize':
                        this.resize()
                        break;
                }
            },
            start : function(e){
                return {
                    _x : e.targetTouches[0].pageX,
                    _y : e.targetTouches[0].pageY
                }
            },
            touchstart : function(e){
                this.posX = this.start(e)._x;
                this.tranX = parseInt(this.getTransform(this._list)) || 0;
                this.offX = 0;
                this.startTime = new Date() * 1;
                this.isRun = true;
            },
            touchmove : function(e){
                if(this.isRun){
                    this.offX = this.start(e)._x - this.posX;
                    var _px = this.tranX + this.offX;
                    var _index = this._index;
                    if(_px > 8 || _px < -8){
                        e.preventDefault()
                    }
                    if(_index == 0 && this.offX > 0 || _index == this.len-1 && this.offX < 0){
                        _px = this.tranX + this.offX * 0.3
                    }

                    this.setTransform(_px,0);
                    this._px =  _px;
                }
            },
            touchend : function(e){
                if((Math.abs(this.offX) || 0) == 0) return;
                if(this.isRun){
                    var _endTime = new Date() * 1;
                    var _pw = this.getWin.w() / 6;
                    var _index = this._index;
                    var _len = this.len;
                    if(_endTime - this.startTime > 50 && Math.abs(this.offX) > _pw){
                        _index = this.offX > _pw ? (_index == 0 ? 0 : --_index) : (_index >= _len-1 ? _len -1 : ++_index);
                        this._index = _index;
                        this.goTransform(_index);
                    }else{
                        this.goTransform(_index);
                    }
                }
                this.isRun = false;
            },
            resize : function(){
                this.getWin.w();
                this.getWin.h();
                this.initPage(this._index);
                this.initStyle();
            },
            goTransform : function(n){
                var _w = -n * this.getWin.w();
                this.loadImg(n);
                this.pageCur.innerText = n+1;
                this.setTransform(_w);
            },
            loadImg : function(n){
                var _o = this._list.querySelectorAll('span')[n];
                var _img = _o.querySelector('img');
                var _dataSrc = 'data-src'
                if(_img.getAttribute(_dataSrc)){
                    _img.setAttribute('src',_img.getAttribute(_dataSrc));
                    _img.removeAttribute(_dataSrc);
                    _o.style.background = 'none';
                }
            },
            initPage : function(n){
                this.loadImg(n);
                this._list.style.webkitTransition = 'none';
                this._list.style.webkitTransform = 'translate3d('+-(n * this.getWin.w())+'px,0,0)';
            },
            setTransform : function(_x,ts){
                this._list.style.webkitTransition = ts == 0 ? 'none' : 'all .5s';
                this._list.style.webkitTransform = 'translate3d('+(_x ? _x : 0)+'px,0,0)';
            },
            getTransform : function(o){
                return win.getComputedStyle(o)['webkitTransform'].split(',')[4];
            },
            createContent : function(){
                _layer++;
                var _header = '<div class="pic_head">(<span class="pageCur">'+(this._index+1)+'</span>/<span class="pageSize">'+this.$el.querySelectorAll(this.opt.item).length+'</span>)</div>';
                var _content = '<div class="picContent">\
								<div class="picList"></div>\
							</div>';
                this.getElement('body').insertAdjacentHTML('beforeEnd','<div id="pic_wrap'+_layer+'" class="pic_wrap">'+_header + _content+'</div>');

                var _topHead = doc.querySelector('head');
                if(!_topHead.querySelector('#picStyle')){
                    var style ='<style id="picStyle">\
								.pic_wrap {position:fixed; left:0; top:0; width:100%; height:100%; z-index: 1000; opacity: 0; -webkit-transition:all .5s; transition:all .5s; }\
								.pic_head { width:100%; height:25px; line-height:25px; background:#000; text-align: center; color:#fff;}\
								.isShow { opacity: 1;}\
								.picContent {position:relative; width:100%; height:100%; background:#000; overflow: hidden;}\
								.picList {position: absolute; left:0; top:0; width:100%; height:100%;}\
								.picList .picItems {display: table-cell; vertical-align: middle; text-align: center; background:url('+this.opt._imgSrc+') no-repeat center center; background-size:16px 16px;}\
								.picList .picItems img {max-width: 100%; max-height: 100%; vertical-align: middle; }\
							</style>';
                    _topHead.insertAdjacentHTML('beforeEnd',style);
                }

                var _wrap = this.getElement('#pic_wrap'+_layer);
                this._head = _wrap.querySelector('.pic_head');
                this._list = _wrap.querySelector('.picList');
                this.pageCur = _wrap.querySelector('.pageCur');
                this._wrap = _wrap;
                this._wrap.classList.add('isShow');
                this.initPic();
                this.bindUI();

                POP.eventMap.on('wrapClick',function(){
                    this.destroy();
                }.bind(this));
            },
            initPic : function(){
                var _item = this.$el.querySelectorAll(this.opt.item);
                var _len = _item.length;
                if(_len){

                    var imgArr = [],_self = this;
                    [].forEach.call(_item,function(item,i){
                        if(item.getAttribute(_self.opt.dataSrc)){
                            imgArr.push({
                                loadShow : 0,
                                src : item.getAttribute(_self.opt.dataSrc)
                            });
                        }else if(item.querySelector('img')){
                            var _img = item.querySelector('img');
                            if(_img.getAttribute(_self.opt.dataSrc)){
                                imgArr.push({
                                    loadShow : 0,
                                    src : _img.getAttribute(_self.opt.dataSrc)
                                });
                            }else{
                                imgArr.push({
                                    loadShow : 1,
                                    src : _img.getAttribute('src')
                                });
                            }
                        }
                    });

                    var _html = '';
                    for (var i = 0; i < imgArr.length; i++) {
                        _html += '<span class="picItems"><img '+(imgArr[i].loadShow ? "src" : "data-src")+'="'+imgArr[i].src+'"></span>';
                    }

                    this.len = _len;
                    this._list.innerHTML = _html;

                    this.initStyle();

                }
            },
            //初始化dom
            initStyle : function(){
                var _item = this._list.querySelectorAll('.picItems');
                var win = this.getWin;
                var _w = _item.length * win.w();
                this._list.style.width = _w + 'px';
                for (var i = 0; i < _item.length; i++) {
                    _item[i].style.cssText = 'width:'+ win.w() +'px; height:'+ parseInt(win.h() - this._head.offsetHeight) +'px';
                }
            },
            getElement : function(o){
                return typeof o === 'string' ? doc.querySelector(o) : o;
            },
            getWin : {
                w : function(){
                    return win.innerWidth;
                },
                h : function() {
                    return win.innerHeight;
                }
            }
        }

    })(POP,window,document);


    POP.pic('.pic1',{item : 'a',dataSrc:'data-src'})





    $(function () {
    	var callerWidth=parseFloat($('.caller-img').css('width'));
    	var callerImgWidth=parseFloat($('.caller-img img').css('width'))+5;
    	var callerCount=parseInt(callerWidth/callerImgWidth);
    	var lenght=$('.caller-img .list').length;
    console.log(lenght)
    console.log(callerCount)
    if(lenght>callerCount){
        for (var i=callerCount+1;i<=lenght;i++){
            console.log(i)
            $('.caller-img').find(`.list:nth-child(${i})`).css('display','none')
        }
    }

})
</script>
</body>
</html>

